<template>
  <div class="__layout-container">
    <!-- 左侧菜单 - 独立一列 -->
    <Aside />

    <!-- 右侧区域 - 包含头部栏和内容区，垂直排列 -->
    <div class="__layout-right-container">
      <!-- 右上头部栏 -->
      <Header></Header>

      <!-- 右下内容区 -->
      <Content />
    </div>
  </div>
</template>

<script setup lang="ts">
import Aside from './Aside.vue'
import Header from './Header.vue'
import Content from './Content.vue'
</script>

<style lang="scss" scoped>
.__layout-container {
  width: 100%;
  height: 100vh;
  display: flex; /* 主容器水平布局 */
  overflow: hidden;
}

/* 右侧整体容器 - 占满剩余宽度，垂直布局 */
.__layout-right-container {
  flex: 1; /* 占据剩余所有宽度 */
  display: flex;
  flex-direction: column; /* 垂直排列头部和内容 */
  height: 100%;
}
</style>
